<template>
  <div>
    <el-tabs v-model="step1TabActivity">
      <el-tab-pane label="采购明细" :name="1">
        <div class="pd-table-data">
          <div class="table-top-btns">
            <el-button type="primary" link @click="hanldeAddPdRow">增行</el-button>
            <el-button type="danger" :disabled="baseForm.procurementItemsInfoList?.filter((item) => item.checked)?.length == 0" link @click="hanldeDeletePdRow">删行</el-button>
          </div>
          <RuifoxTable :loading="pdTableDataLoading" :disabled="dragDisabled" :canDrag="false" @handleSort="handleSort" @handleContentAdd="handleContentAdd" :default-index="true" :default-checkbox="true" v-model:tableData="baseForm.procurementItemsInfoList" v-model:fieldList="pdFieldList">
            <!-- 多选 -->
            <template #default-checkbox="{element}">
              <div class="table-div-check">
                <el-checkbox class="unmover" v-model="element.checked" @change="handleCheckTable(element.id)" size />
              </div>
            </template>
            <template #name="{element}">
              <el-input v-model="element.name" @mouseenter="handleDragDisabled(true)" @mouseleave="handleDragDisabled(false)"></el-input>
            </template>
            <template #quantity="{element}">
              <!-- <el-input v-model="element.quantity" :min="0" @input="(val) => hanldeGetAllPrice(element,'quantity')" type="number"></el-input> -->
              <el-input-number class="unmover" v-model="element.quantity" :precision="2" :min="0" @change="() => hanldeGetAllPrice(element)" />
            </template>
            <template #unitPrice="{element}">
              <el-input-number v-model="element.unitPrice" :precision="2" :min="0" @change="() => hanldeGetAllPrice(element)" />
              <!-- <el-input v-model="element.unitPrice" :min="0" @input="() => hanldeGetAllPrice(element,'unitPrice')" type="number"></el-input> -->
            </template>
            <template #countingUnit="{element}">
              <el-input v-model="element.countingUnit"></el-input>
            </template>
            <template #totalPrice="{element}">
              <el-input v-model="element.totalPrice" type="number" disabled></el-input>
            </template>
            <template #specification="{element}">
              <el-input v-model="element.specification"></el-input>
            </template>
            <template #materialCode="{element}">
              <el-input v-model="element.materialCode" :title="element.materialCode"></el-input>
            </template>
            <template #note="{element}">
              <el-input v-model="element.note" :title="element.note"></el-input>
            </template>
          </RuifoxTable>
          <div class="total-row">
            <div class="label">合计</div>
            <div class="amount-total total">总金额(￥{{baseForm.totalAmount}})</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="其他信息" :name="2" v-if="!hideTab2">
        <el-form :model="baseForm" label-width="auto" label-position="top" ref="pdFormRef" :rules="pdFormRules">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="联系人姓名">
                <el-input v-model="baseForm.contactName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人电话">
                <el-input v-model="baseForm.contactPhone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人邮箱">
                <el-input v-model="baseForm.contactMail" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="确认截至时间" prop="endTime">
                <el-date-picker style="width: 100%;" type="datetime" clearable v-model="baseForm.endTime" placeholder="请选择截至日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="使用单位">
                <el-input v-model="baseForm.unit" />
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="地址">
                <el-input v-model="baseForm.address" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, toRefs } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const props = defineProps({
  baseForm: {
    type: Object,
    default: () => ({}),
  },
  id: {
    type: [Number, String],
  },
  hideTab2: {
    type: Boolean,
    default: false,
  },
})
const { baseForm, hideTab2 } = toRefs(props)
const step1TabActivity = ref(1) //招标立项tab
/************************采购明细表格 开始************************/
const defaultPdRow = {
  name: null, //内容
  quantity: 0, //数量
  unitPrice: 0, //单价
  countingUnit: '套', //计数单位
  note: '', //采购品备注
  totalPrice: 0, //总价
  specification: '', //规格
  materialCode: '', //物料编码
}
if (!props.id) {
  baseForm.value.procurementItemsInfoList = ref([structuredClone(defaultPdRow)])
}
const pdTableDataLoading = ref(false)

const pdFieldList = ref([
  {
    title: '采购内容',
    name: 'name',
  },
  {
    title: '数量',
    name: 'quantity',
  },
  {
    title: '计数单位',
    name: 'countingUnit',
  },
  {
    title: '单价(￥)',
    name: 'unitPrice',
  },
  {
    title: '采购品备注',
    name: 'note',
  },
  {
    title: '总价(￥)',
    name: 'totalPrice',
  },
  {
    title: '规格',
    name: 'specification',
  },
  {
    title: '物料编码',
    name: 'materialCode',
  },
])
// 增行
const hanldeAddPdRow = () => {
  baseForm.value.procurementItemsInfoList.push(structuredClone(defaultPdRow))
}
// 删行
const hanldeDeletePdRow = () => {
  ElMessageBox.confirm(`<div><p style="font-size: 16px;margin-bottom: 15px;">是否确认删除选中行？</p></div>`, `删除确认`, {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    let checkedArr = baseForm.value.procurementItemsInfoList.filter((item) => item.checked)
    if (checkedArr.length) {
      baseForm.value.procurementItemsInfoList = baseForm.value.procurementItemsInfoList.filter((item) => item.checked != true)
    } else {
      ElMessage({
        showClose: true,
        message: '请选中后删除！',
        type: 'warning',
      })
    }
  })
}
// 拖拽排序
const handleSort = (e) => {
  console.log('e1', e)
}
// 拖拽排序
const handleContentAdd = (e) => {
  console.log('e2', e)
}
// 禁止拖拽
const dragDisabled = ref(false)
const handleDragDisabled = (flag) => {
  dragDisabled.value = flag
}
const hanldeGetAllPrice = (val) => {
  val.totalPrice = val.quantity * val.unitPrice
  let amount = baseForm.value.procurementItemsInfoList
    .map((item) => item.totalPrice)
    .reduce((total, current) => total + current, 0)
    .toFixed(2)
  baseForm.value.totalAmount = amount
}

/************************采购明细表格 结束************************/

// 招标信息
const defaultPdForm = {
  endTime: '', //确认截至时间
  contactName: '', //招标联系人姓名
  contactPhone: '', //招标联系人电话
  contactMail: '', //招标联系人邮箱
  address: '', //地址
  unit: '', //使用单位
}
if (!props.id && !hideTab2.value) {
  baseForm.value = { ...baseForm.value, pdForm: structuredClone(defaultPdForm) }
}
const pdFormRef = ref()
const pdFormRules = ref({
  endTime: [{ required: true, message: '请输入内容', trigger: 'blur' }],
})
</script>
<style scoped lang='scss'>
.pd-table-data {
  .table-top-btns {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .total-row {
    width: 100%;
    display: flex;
    align-items: center;
    color: $failColor;
    margin-top: 10px;
    .total {
      margin-left: 80px;
    }
  }
}
</style>